<template>
  <nut-input
    ref="inputRef"
    v-model="text"
    v-on="onEvents"
    :placeholder="placeholder"
    :inputAlign="inputAlign"
    :border="border"
    :disabled="disabled"
    :readonly="readonly"
    :autofocus="autofocus"
    :maxLength="maxLength"
    :clearable="clearable"
    :showClearIcon="showClearIcon"
    :clearSize="clearSize"
    :showWordLimit="showWordLimit"
    :error="error"
    :formatter="formatter"
    :formatTrigger="formatTrigger"
    :confirmType="confirmType"
    @click="onClick"
  >
    <template #right v-if="type === 'search'">
      <IconArrowRight color="#979797" />
    </template>
    <template v-for="slot in Object.keys($slots)" #[slot]="scope">
      <slot v-bind="scope" :name="slot" />
    </template>
  </nut-input>
</template>

<script setup>
import { ArrowRight as IconArrowRight } from '@nutui/icons-vue';
import { commonProps } from '@/supreme/core/props';
import { useEvents } from '@/supreme/core';
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuInput'
});
const props = defineProps({
  ...commonProps,
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  inputAlign: {
    type: String,
    validator: function (value) {
      return ['left', 'center', 'right'].includes(value);
    },
    default: 'left'
  },
  border: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  autofocus: {
    type: Boolean,
    default: false
  },
  maxLength: {
    type: [String, Number],
    default: null
  },
  clearable: {
    type: Boolean,
    default: false
  },
  showClearIcon: {
    type: Boolean,
    default: false
  },
  clearSize: {
    type: String,
    default: '14'
  },
  showWordLimit: {
    type: Boolean,
    default: false
  },
  error: {
    type: Boolean,
    default: false
  },
  formatter: {
    type: Function,
    default: undefined
  },
  formatTrigger: {
    type: String,
    validator: function (value) {
      return ['onChange', 'onBlur'].includes(value);
    },
    default: 'onChange'
  },
  confirmType: {
    type: String,
    default: 'done' // 假设没有默认值，或者根据具体需求设定
  }
});
const emit = defineEmits([
  'update:modelValue',
  'focus',
  'blur',
  'clear',
  'click',
  'clickInput',
  'confirm'
]);
const text = useVModel(props, 'modelValue', emit);
const formSafe = inject('formSafe');

const inputRef = ref();
const onEvents = computed(() => {
  const events = ['update:modelValue', 'focus', 'blur', 'clear', 'click', 'clickInput', 'confirm'];
  return useEvents({ props, events, emit, form: formSafe?.form });
});
</script>

<style lang="scss" scoped></style>
